<template>
  <div class="category-detail">
    <div v-for="(item,index) in subcategorylist" :key="index" class="category-detail-item">
      <a :href="item.link"><img :src="item.image" alt="" @load="imageLoad"></a>
      <p>{{item.title}}</p>
    </div>
  </div>
</template>

<script>
  import scroll from '../../../components/common/scroll/scroll.vue'
   export default{
  props:{
    subcategorylist:{
      type:Array,
      default(){
        return []
      }
    }
  },
  components:{
    scroll
  },
  methods:{
    imageLoad(){
      this.$emit('imageLoad')
    }
  }
   }
</script>

<style scoped="scoped">
  .category-detail{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
    width: 100%;
  }
  .category-detail-item{
    display: flex;
    align-items: center;
    /* flex方式为列 */
    flex-direction: column;
    justify-content: center;
    width: 80px;
    height: 100px;
    margin-bottom: 10px;
  }
  .category-detail-item img{
    width: 65px;
    margin-bottom: 7px;
  }
  .category-detail-item p{
    font-size: 14px;
  }
</style>
